<template>
  <div class="viewAnimate">
    <div class="animated"><img src="../assets/images/viewAnimate/1.jpg" alt=""></div>
    <div class="animated"><img src="../assets/images/viewAnimate/1.jpg" alt=""></div>
    <div class="animated"><img src="../assets/images/viewAnimate/1.jpg" alt=""></div>
    <div class="animated"><img src="../assets/images/viewAnimate/1.jpg" alt=""></div>
    <div class="animated"><img src="../assets/images/viewAnimate/1.jpg" alt=""></div>
    <div class="animated"><img src="../assets/images/viewAnimate/1.jpg" alt=""></div>
    <div class="animated"><img src="../assets/images/viewAnimate/1.jpg" alt=""></div>
    <div class="animated"><img src="../assets/images/viewAnimate/1.jpg" alt=""></div>
    <div class="animated"><img src="../assets/images/viewAnimate/1.jpg" alt=""></div>
    <div class="animated"><img src="../assets/images/viewAnimate/1.jpg" alt=""></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: {
        one: false,
        two: false,
        three: false,
        four: false,
        five: false,
        six: false
      }
    }
  },
  methods: {
    handleAnimate () {
      const domList = document.querySelectorAll('.animated')
      const domCon = document.querySelector('.viewAnimate')
      const wT = this.$utils.common.getTargetWH(domCon).height
      domList.forEach(ele => {
        const cH = this.$utils.common.getViewTBLR(ele).top
        // console.log('sT:', sT)
        // console.log('wT:', wT)
        // console.log('cH:', cH)
        if (wT > cH) {
          setTimeout(() => {
            ele.style.opacity = 1
            ele.classList.add('fadeInUp')
          }, 200)
        } else {
          // ele.style.opacity = 0
        }
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.handleAnimate()
      document.querySelector('.viewAnimate').onscroll = this.handleAnimate
    })
  },
  destroyed () {
    document.querySelector('.viewAnimate').onscroll = null
  }
}
</script>

<style lang="less" scoped>
.viewAnimate {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  .animated {
    height: 400px;
    text-align: center;
    margin-bottom: 20px;
    opacity: 0;
    img {
      width: 100%;
    }
  }
}
</style>
